發想

讓每個文字都有進入進出動畫。( •̀ ω •́ )✧

可以應用在滾動出現文字或者遊戲對話逐字出現效果。

類似以下影片效果。( ´ ▽ ` )ﾉ

規格

外觀設計

1. 預設使用 p 標籤，切分後的文字使用 span 標籤
2. 須符合 a11y 標準

功能需求

1. 指定文字後自動分割，無須設定則使用預設動畫
2. 可以覆蓋預設動畫的參數
3. 動畫除了可設定 CSS 屬性，還可設定 duration、delay、easing，而且可傳遞函數，函數參數須提供「目前文字 index、動畫總數」
4. 可自訂分割規則
5. 可直接給定切分好的文字

建立檔案

與先前章節相同，讓我們建立元件與文件檔案，檔案結構如下。

.
├─ docs        
│  └─ components
│     └─ text-characters-transition
│        └─ index.md
└─ src
   └─ components
      └─ text-characters-transition
         ├─ examples
         ├─ └─ basic-usage.vue 
         └─ text-characters-transition.vue

元件內容

首先是 Vue 元件的部份，很單純，就是先預留 Vue SFC 內容。

這個元件不提供 slot，所以刪除 slot 部分

src\components\text-characters-transition\text-characters-transition.vue

<template>
  <div class="">
    逐字轉場
  </div>
</template>

<script setup lang="ts">
// #region Props
interface Props { }
// #endregion Props
const props = withDefaults(defineProps<Props>(), {});

// #region Emits
const emit = defineEmits<{}>();
// #endregion Emits

// #region Methods
defineExpose({});
// #endregion Methods
</script>

<style scoped lang="sass">
</style>

src\components\text-characters-transition\examples\basic-usage.vue

<template>
  <div class="flex flex-col gap-4 w-full border border-gray-300 p-6">
    <text-characters-transition />
  </div>
</template>

<script setup lang="ts">
import TextCharactersTransition from '../text-characters-transition.vue';
</script>

元件介紹

接著是元件介紹部分，先加入固定的基本內容。

docs\components\text-characters-transition\index.md

---
description: 讓每個文字都有進入進出動畫。( •̀ ω •́ )✧
---

<script setup>
import BasicUsage from '../../../src/components/text-characters-transition/examples/basic-usage.vue'
</script>

# 逐字轉場

讓每個文字都有進入進出動畫。( •̀ ω •́ )✧

## 使用範例

### 基本用法

預設就是經典的淡入淡出。( •̀ ω •́ )✧

<basic-usage/>

::: details 查看範例原始碼
<<< ../../../src/components/text-characters-transition/examples/basic-usage.vue
:::

## 原理

文字文字文字文字文字文字文字文字文字文字文字

## API

### Props

<<< ../../../src/components/text-characters-transition/text-characters-transition.vue/#Props

### Emits

<<< ../../../src/components/text-characters-transition/text-characters-transition.vue/#Emits

### Methods

<<< ../../../src/components/text-characters-transition/text-characters-transition.vue/#Methods

導航

最後一步就是在 sidebar 中加入頁面連結。

docs\.vitepress\config.mts

...
export default defineConfig({
  ...
  themeConfig: {
    ...
    sidebar: [
      ...
      {
        text: '元件',
        link: '/components/',
        items: [
          ...
          {
            text: '文字',
            items: [
              { text: '逐字轉場', link: '/components/text-characters-transition/' },
            ]
          },
        ]
      },
    ],
    ...
  }
})

沒有意外的話應該可以在左側的側欄中看到「調皮的按鈕」，點擊進入後可以看到以下內容。

接下來讓我們開始開發元件吧！( •̀ ω •́ )✧

總結

• 分析「逐字轉場」的規格
• 建立元件與文件檔案

以上程式碼已同步至 GitLab，大家可以前往下載：

GitLab - D08